<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Dili Food</title>
		<link rel="stylesheet" href="./css/home.css" />
		<link rel="stylesheet" href="./css/bk.css" />
		<link rel="icon" href="./food.ico">
	</head>
	<body>

			<div class="page">
				<div style="position:absolute;left:0;top:60px;right:0;bottom:0;width:1528px;height:550px;overflow:hidden">
					<img style="position: absolute; left: 0; top: 0;width: auto; height: 550px;"
						src="https://restaurant-1047504-pic9.websiteonline.cn/upload/banner01.jpg" alt="">
				</div>
				<div class="home-title">
					<span id="home-title-1">不只是美味 更是长久回味</span>
					<p><span id="home-title-2">Not only delicious, but also a long aftertaste<br />Uniform style of
							decoration, improve the training system and a strong ability to plan to give investors a
							greater<br />
							return on the current branch of the business is very unpopular to each place</span> </p>
				</div>
				<img class="home-main2-bk" src="https://restaurant-1047504-pic9.websiteonline.cn/upload/bg.png">
				<div class="home-main1">
					<div class="home-main1-left">
						<span class="home-main1-title">
							Dili Food餐饮有限公司
						</span>
						<span
							class="home-main1-mes">餐厅是一家家式大众餐厅，以系列特色菜及盱眙龙虾为主流，兼营冷菜、热菜、酒饮茶等食品，是家庭休闲，商务简餐，朋友小聚，情侣约会，生日聚会的理想处所。餐厅装饰简约时尚，苏州园林文化浓郁。</span>
						<span class="home-main1-mes2">Dili
							Food很重视产品的研发和创新，餐单有规律翻新，坚持不断促销活动，使老顾客不断增加，以致生意常年稳定。统一风格的装修，完善的培训体系及强大的策划能力给投资者更大的回报目前分店每到一处均生意火爆异常，晚上等台就餐已是司空见惯。特别是每年龙虾上市季节，餐厅内更是人满为患，必须排队就餐。一般加盟商6-----10个月均能收回所有投入。</span>
						<a href="#" class="more"
							style="width:162px;position:absolute;left:100px;top:410px;height:45px;line-height:45px;">
							<span>MORE</span>
						</a>
					</div>
					<div class="home-main1-right">
						<img class="home-main1-pic1"
							src="https://restaurant-1047504-pic9.websiteonline.cn/upload/pic01.jpg">
						<img class="home-main1-pic2"
							src="https://restaurant-1047504-pic9.websiteonline.cn/upload/pic02.jpg">
					</div>

				</div>
				<div class="home-main2">

					<img src="https://restaurant-1047504-pic9.websiteonline.cn/upload/icon01.png"
						class="home-main2-pic1" style="width: 135px; height: 132px;">
					<span
						style="font-family: 微软雅黑; font-size: 20px; color: rgb(255, 255, 255);position:absolute;left:320px;top:250px;">专业的厨师团队</span>
					<div class="line" style="	left:360px;"></div>
					<div class="wp-title_content">
						<div class="home-main2-mes1"><span
								style="font-family: 微软雅黑; color: rgb(233, 233, 233); line-height: 220%;">学习厨师需要一定的文化知识和一定承受能力以及判断能力</span><br><span
								style="font-family: 微软雅黑; color: rgb(233, 233, 233); line-height: 220%;">学习厨师烹饪可报考相关的烹饪学校或者跟师傅</span>
						</div>
					</div>

					<img src="https://restaurant-1047504-pic9.websiteonline.cn/upload/icon02.png" type="zoom"
						class="home-main2-pic2" style="width: 135px; height: 132px;">
					<span
						style="font-family: 微软雅黑; font-size: 20px; color: rgb(255, 255, 255);position:absolute;left:700px;top:250px;">精致的菜品菜式</span>
					<div class="line" style="left:740px"></div>
					<div class="wp-title_content">
						<div class="home-main2-mes2"><span
								style="font-family: 微软雅黑; color: rgb(233, 233, 233); line-height: 220%;">独有的神秘配方和标准化产品操作流程为产品完全口味统一<br>奠定坚实的基础，将复杂的制作傻瓜化</span><span
								style="font-family: 微软雅黑; color: rgb(233, 233, 233); line-height: 220%;"></span></div>
					</div>

					<img src="https://restaurant-1047504-pic9.websiteonline.cn/upload/icon03.png" type="zoom"
						class="home-main2-pic3" style="width: 135px; height: 132px;">
					<span
						style="font-family: 微软雅黑; font-size: 20px; color: rgb(255, 255, 255);position:absolute;left:1080px;top:250px;">严谨的管理体系</span>
					<div class="line" style="left:1120px;"></div>
					<div class="wp-title_content">
						<div class="home-main2-mes3"><span
								style="font-family: 微软雅黑; color: rgb(233, 233, 233); line-height: 220%;">统一风格的装修，完善的培训体系及强大的策划能力给投资者<br>更大的回报，目前分店每到一处均生意火爆异常</span><span
								style="font-family: 微软雅黑; color: rgb(233, 233, 233); line-height: 220%;"></span></div>
					</div>
				</div>
				<div class="home-main3">
					<div class="home-main3-title">
						<span id="home-main3-title1"
							style="font-family: 微软雅黑; font-size: 26px; color: rgb(51, 51, 51);">团队 <span
								style="font-size: 16px; color: rgb(168, 168, 168);">our team<br></span></span>
					</div>
					<div class="home-main3-main">
						<ul>
							<li>
								<a href="#">
									<img src="https://restaurant-1047504-pic9.websiteonline.cn/upload/aa12.jpg"
										class="home-main3-pic1" alt="何某某">
									<span class="main3-1">何某某</span>
									<span class="main3-2">一级厨师</span>
									<span class="main3-3">根据成菜要求，对烹饪原料、辅料、调料
										进行加工，制作中式菜肴的人员，重视产品的研发和创新</span>
								</a>
							</li>
							<li><a href="#">
									<img src="https://restaurant-1047504-pic9.websiteonline.cn/upload/aa9.jpg"
										class="home-main3-pic1" alt="张某某">
									<span class="main3-1">张某某</span>
									<span class="main3-2">二级厨师</span>
									<span class="main3-3">作为一名合格的厨师，更有精细的刀工，对火候的掌握要得当，调味要准确适口，掌握现代营养等烹饪知识</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://restaurant-1047504-pic9.websiteonline.cn/upload/aa13.jpg"
										class="home-main3-pic1" alt="林某某">
									<span class="main3-1">林某某</span>
									<span class="main3-2">二级厨师</span>
									<span class="main3-3">要了解祖国的烹饪文化历史，要懂得一定的民俗礼仪知识。要有一定的美学修养和艺术创新基础</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://restaurant-1047504-pic9.websiteonline.cn/upload/aa10.jpg"
										class="home-main3-pic1" alt="王某某">
									<span class="main3-1">王某某</span>
									<span class="main3-2">特级厨师</span>
									<span class="main3-3">学习厨师需要一定的文化知识和一定承受能力以及判断能力，学习厨师烹饪可报考相关的烹饪学校服务的地方</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="footer" style="top:2600px">Create by noblegasesgoo@2021</div>
			</div>
			<div class="title">
				<img class="symbol" src="https://restaurant-1047504-pic9.websiteonline.cn/upload/logo.png">
				<div>
					<!-- 导航栏 -->
					<ul>
						<li><a href="home.html">首页</a></li>
						<li><a href="purchase.html">菜品详情</a></li>
						<li><a href="introduce.html">关于我们</a></li>
						<li><a href="newmes.html">新闻资讯</a></li>
					</ul>
				</div>
			</div>
		<script>
			//用js检测鼠标滚轮距离顶部位置来给div添加动画
			window.onscroll = function() {
				//检测鼠标滚轮距离顶部位置 
				var top = document.documentElement.scrollTop || document.body.scrollTop;
				var box1 = document.getElementsByClassName("home-main1-left")[
					0]; // 由于获取该元素的时候用的是getElementsByClassName()，得到的是数组，不是数组里面的元素，而我们要的不是数组，要的是元素
				var box2 = document.getElementsByClassName("home-main1-right")[0];
				var box3 = document.getElementsByClassName("home-main2-pic1")[0];
				var box4 = document.getElementsByClassName("home-main2-pic2")[0];
				var box5 = document.getElementsByClassName("home-main2-pic3")[0];
				console.log(top);
				//要设置到DIV显示出来时给div添加动画 也可以设置一个数值只要保证div出来给它加动画即可
				if (top > 100) {
					box1.setAttribute("style", "animation-name:fadeInLeft;animation-duration:1.5s;opacity:1;");
					box2.setAttribute("style", "animation-name:fadeIncenter;animation-duration:2s;opacity:1;");
				}
				if (top > 700) {
					box3.setAttribute("style", "animation-name: flip;animation-duration:0.7s;")
					box4.setAttribute("style", "animation-name: flip;animation-duration:0.7s;")
					box5.setAttribute("style", "animation-name: flip;animation-duration:0.7s;")
				}
			}
		</script>
	</body>
</html>
